<template>
  <div class="AnnouncementListTagDia">
    <MyDialog v-bind="$attrs">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="ruleForm.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input
            v-model="ruleForm.content"
            :rows="15"
            type="textarea"
            placeholder="请输入内容体"
          />
        </el-form-item>
        <el-form-item label="图片">
          <UploadImg :fileListProps="ruleForm.imgUrl" />
        </el-form-item>
      </el-form>
    </MyDialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, inject, provide, defineOptions } from "vue";
import MyDialog from "@/components/base/MyDialog.vue";
import UploadImg from "@/components/base/UploadImg.vue";
defineOptions({
  inheritAttrs: false,
});
// 规则
const rules = reactive({
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
  content: [{ required: true, message: "请输入内容", trigger: "blur" }],
});
// 提交函数
const submitForm = () => {
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};
const ruleFormRef = ref(null);
const DialogShow = inject("SHOW");
// 取消函数
const cancelForm = () => {
  // 清空表单
  ruleFormRef.value.resetFields();
  ruleForm.title = "";
  ruleForm.content = "";
  ruleForm.imgUrl = [];
  DialogShow.value = false;
};
//表单
const ruleForm = reactive({
  title: "",
  content: "",
  imgUrl: [],
});

provide("SUBMITFORM", submitForm);
provide("ONCANCEL", cancelForm);
onMounted(() => {
  console.log("onMounted,,弹窗组件公告");
});
</script>
<style scoped lang="scss"></style>
